<template>
  <a-drawer
    :class="drawerClassName"
    :placement="placement"
    :visible="visible"
    :closable="!closable"
    :width="width"
    :headerStyle="headerStyle"
    :bodyStyle="bodyStyle"
    :drawerStyle="drawerStyle"
    :maskClosable="maskClosable"
    :mask="mask"
    :destroyOnClose="destroyOnClose"
    :maskStyle="maskStyle"
    :wrapStyle="wrapStyle"
    :zIndex="zIndex"
    @close="onClose"
  >
    <template slot="title">
      <slot name="title">
        <div class="title">{{ title }}</div>
      </slot>
    </template>
    <slot />
    <div @click="onClose" v-if="closable" class="close_icon">
      <d-icon :component="dwer_close" />
    </div>
  </a-drawer>
</template>

<script>
/**
 * @interface props
 *    placement:String = left | right | top | bottom
 *    title 标题 ｜ slot
 *    headerStyle
 *    drawerStyle
 *    bodyStyle
 *   drawerClassName
 * @method close 关闭 drawer回调
 *
 * @slot name=title
 *
 * @slot content
 */

import DIcon from './DIcon.vue';
import dwer_close from './assets/dwer_close.svg';

export default {
  name: 'DDrawer',
  props: {
    width: {
      type: Number,
      default: 310
    },
    closable: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: [Boolean, undefined]
    },
    mask: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    placement: {
      type: String,
      default: 'right'
    },
    visible: {
      type: Boolean,
      default: true
    },
    top: {
      type: String,
      default: '0'
    },
    bodyColor: {
      type: String,
      default: '#fff'
    },
    maskStyle: {
      type: Object,
      default: () => ({})
    },
    wrapStyle: {
      type: Object,
      default: () => ({})
    },
    zIndex: {
      type: Number,
      default: 1000
    },
    drawerClassName: {
      type: String,
      default: 'drawer_box'
    },
    headerStyle: {
      type: Object,
      default: () => ({
        height: '58px',
        padding: '20px 20px 0',
        backgroundColor: '#fff'
      })
    },
    drawerStyle: {
      type: Object,
      default: () => ({
        borderLeft: '10px solid #A6C7F3',
        backgroundColor: '#fff',
        boxShadow: 'none'
      })
    },
    bodyStyle: {
      type: Object,
      default: () => ({
        padding: '0',
        OverflowY: 'hidden'
      })
    }
  },
  components: {
    DIcon
  },
  data() {
    return {
      dwer_close
    };
  },
  methods: {
    onClose() {
      this.$emit('close');
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
}
.drawer_box {
  height: 100%;
}
.close_icon {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
</style>
